<template>
    <div class="e-form">
        <div style="width: 100%" class="form">
            <el-form
                :disabled="isDsabled"
                :model="formData"
                ref="formData"
                label-width="150px"
            >
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="供应商名称：" prop="outerName">
                            {{ formData.outerName }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="合同名称：" prop="contractName">
                            {{ formData.contractName }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="合同编号：" prop="contractNo">
                            {{ formData.contractNo }}
                        </el-form-item>
                    </el-col>
                </el-row>
                <div id="aptitudeCon" class="con">
                    <div class="e-table">
                        <el-table
                            :data="tableData"
                            border
                            class="table"
                            ref="table"
                            :max-height="$store.state.tableHeight"
                            :span-method="objectSpanMethod"
                            :show-header="false"
                            style="width: 100%"
                            :header-cell-style="{ textAlign: 'center' }"
                            :cell-style="{ textAlign: 'center' }"
                            v-sortTable="{
                                tableData: tableData,
                                _this: this,
                                ref: 'table'
                            }"
                        >
                            <el-table-column
                                prop="name"
                                label="证书编号"
                                min-width="200"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="count"
                                label="证书类型"
                                min-width="200"
                            >
                                <template slot-scope="scope">
                                    <el-rate
                                        show-text
                                        :texts="texts"
                                        v-model="scope.row.count"
                                        :colors="colors"
                                        allow-half
                                    >
                                    </el-rate>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="evaluateGrade"
                                label="动态评价结果"
                                min-width="200"
                            >
                                <!-- slot-scope="scope" -->
                                <template>
                                    <el-rate
                                        show-text
                                        :texts="texts"
                                        v-model="start"
                                        :colors="colors"
                                        disabled
                                        allow-half
                                    >
                                    </el-rate>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="评价意见" prop="remarks">
                            <el-input
                                v-model="formData.remarks"
                                placeholder="请填写"
                                type="textarea"
                                :rows="2"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <!-- <div class="buttons">
                <el-button type="primary" @click="handleAdd" size="small"
                    >保存</el-button
                >
                <el-button @click="handleClose" size="small">取消</el-button>
            </div> -->
        </div>
    </div>
</template>

<script>
import subcontractorRAP from '@/api/OutsourcingartyAdmin/subcontractorAdmin/subcontractorRAP.js'
import { closeAppClient } from '@/utils/common'
export default {
    computed: {
        start: {
            get () {
                let total = 0
                this.tableData.forEach(item => {
                    total += item.count
                })
                return total / 5
            },
            set () {}
        }
    },
    created () {
        let data = JSON.parse(localStorage.getItem('vuex'))
        this.evaluationBasis = data.evaluationBasis
        // 进入页面获取原来的数据
        if (this.evaluationBasis.billId) {
            this.getdynamicEvaluation(this.evaluationBasis.billId)
        }
        window.handleAdd = () => {
            this.handleAdd()
        }
    },
    beforeDestroy () {
        window.handleAdd = null
    },
    data () {
        return {
            colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
            texts: ['差', '中', '一般', '好', '满意'],
            evaluationBasis: {},
            formData: {
                billDate: '', //评价日期
                contractName: '', //	合同名称
                contractNo: '', //合同编号
                endDate: '', //	结束时间
                evaluateFraction: 0, //	评价分数
                evaluateGrade: 0, //动态评价星级
                evaluatePeople: '', //评价人
                evaluatePeopleId: '', //评价人id
                evaluateResult: 0, //	动态评价结果
                gmtCreate: '', //录入时间
                gmtModified: '', //修改时间
                id: '', //主键
                orgId: '', //评价机构id
                orgName: '', //	评价机构名称
                outerId: '', //	外包方id
                outerName: '', //外包方名称
                remarks: '', //评价意见
                settleNo: '', //结算编号
                startDate: '', //开始时间
                billId: '', //调用单据id
                billType: '', //	调用单据编号
                other: 0, //其他
                problemImprovement: 0, //	问题改进情况
                serviceQuality: 0, //服务质量
                supplyPrice: 0, //供货价格
                supplySpeed: 0, //	供货及时性
                useType: null
            },
            tableData: [
                {
                    name: '供货及时性',
                    count: 0
                },
                {
                    name: '服务质量',
                    count: 0
                },
                {
                    name: '供货价格',
                    count: 0
                },
                {
                    name: '问题改进情况',
                    count: 0
                },
                {
                    name: '其他',
                    count: 0
                }
            ],
            isDsabled: false //是否禁用
        }
    },

    methods: {
        // 获取详情
        async getdynamicEvaluation (val) {
            let data = await subcontractorRAP.getDynamicEvaluation({
                billId: val
            })
            if (data.code != 200) {
                this.tableData[0].count = data.supplySpeed
                this.tableData[1].count = data.serviceQuality
                this.tableData[2].count = data.supplyPrice
                this.tableData[3].count = data.problemImprovement
                this.tableData[4].count = data.other
                this.isDsabled = true
                this.formData = data
            } else {
                // 如果库内没有该数据，则将其他页面传过来的数据赋值
                this.formData = this.evaluationBasis
                this.isDsabled = false
            }
        },
        // 保存
        async handleAdd () {
            let newData = JSON.parse(JSON.stringify(this.formData))
            // 处理选中的星级
            newData.supplySpeed = this.tableData[0].count
            newData.serviceQuality = this.tableData[1].count
            newData.supplyPrice = this.tableData[2].count
            newData.problemImprovement = this.tableData[3].count
            newData.other = this.tableData[4].count
            // 给星星赋值
            newData.evaluateGrade = this.start
            // 转换成分数【1个星星20分，半个星星10分。】
            newData.evaluateFraction = this.start * 20
            let data = await subcontractorRAP.dynamicEvaluationAdd(newData)
            if (data.code == 200) {
                this.clientPop('suc', '保存成功', this.callback)
            } else {
                this.clientPop('err', '保存失败')
            }
        },
        callback () {
            // 关闭弹窗
            closeAppClient()
        },
        // 合并列
        objectSpanMethod ({ columnIndex }) {
            if (columnIndex === 2) {
                return {
                    rowspan: 5,
                    colspan: 1
                }
            }
        }
    }
}
</script>

<style lang="scss" scoped>
::v-deep .el-rate__text {
    margin-left: 15px;
}
.e-form {
    margin-top: 20px;
}
</style>
